<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <title>用户组</title>
    <th:block th:include="import :: links"></th:block>
    <link th:href="@{/plugins/ztree/css/zTreeStyle/zTreeStyle.css}" rel="stylesheet"/>
    <link th:href="@{/plugins/markdown/css/editormd.min.css}" rel="stylesheet"/>
</head>
<body>
<header>
    <th:block th:include="import :: navigation"></th:block>
</header>
<section class="container" style="margin-top: 60px;">
    <div class="jumbotron col-md-12">
        <h3 th:text="${bean.appName}">Hello, world!</h3>
    </div>
    <div class="col-md-12">
        <form class="form-inline" method="post" action="/app/module/update">
            <div class="form-group col-md-4">
                <label for="pid">所属目录</label>
                <input type="hidden" name="pid" id="realpid" th:value="${module.pid}"/>
                <input type="text" class="form-control" id="pid" placeholder="点击选择" readonly="readonly" value="" onclick="showMenu();"/>
            </div>
            <div class="form-group col-md-4">
                <label for="moduleName">页面名称</label>
                <input type="text" class="form-control" id="moduleName" name="moduleName" th:value="${module.moduleName}" placeholder="请输入要么名称" required="required"/>
            </div>

            <div class="form-group col-md-4">
                <div class="btn-group" role="group" aria-label="...">
                    <div class="btn-group" role="group">
                        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            插入模板
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            <li><a href="#">模板1</a></li>
                            <li><a href="#">模板1 action</a></li>
                            <li><a href="#">模板1 else here</a></li>
                        </ul>
                    </div>
                    <button type="submit" class="btn btn-success">保存</button>
                </div>

            </div>

            <div class="form-group col-md-12" id="test-editormd" style="margin-top: 10px;min-height: 200px;">
                <textarea id="content" name="content" th:text="${pages.content}"></textarea>
            </div>
        </form>
    </div>
</section>
<div id="menuContent" class="menuContent" style="display:none; position: absolute;z-index:9999;background: #f5f5f5;border: 1px solid #ccc;">
    <ul id="moduleTree" class="ztree" style="margin-top:0; width:180px; height: 300px;"></ul>
</div>
<footer id="footer"></footer>
<th:block th:include="import :: impJS"></th:block>
<script type="text/javascript" th:src="@{/plugins/markdown/editormd.min.js}"></script>
<script th:src="@{/plugins/ztree/js/jquery.ztree.all.min.js}" type="text/javascript"></script>
<script type="text/javascript" th:inline="javascript">
    var testEditor;
    var appId = [[${bean.appId}]]
    $(function () {
        testEditor = editormd("test-editormd", {
            width: "100%",
            autoHeight: true,
            markdown:$("#content").val(),
            path: "/plugins/markdown/lib/",
            toolbarIcons: function () {
                return ["undo", "redo", "|", "bold", "del", "italic", "quote", "ucwords", "uppercase", "lowercase", "|",
                    "h1", "h2", "h3", "h4", "h5", "h6", "|",
                    "list-ul", "list-ol", "hr"]
            }
        });
        initTree();
    });

    function initTree() {
        var setting = {
            view: {
                dblClickExpand: false,
                showLine: false,
                showIcon: false,
                selectedMulti: false
            },
            check: {
                enable: true,
                chkStyle: "radio",
                radioType: "all"
            },
            async: {
                dataType: "json",
                enable: true,
                type: "get",
                otherParam: {"appId": appId, "type": 0},
                url: "/app/module/list",
                dataFilter: function (treeId, parentNode, responseData) {
                    return responseData.data;
                }
            },
            data: {
                key: {
                    name: "moduleName"
                },
                simpleData: {
                    enable: true,
                    idKey: "moduleId",
                    pIdKey: "pid",
                    rootPId: "0"
                }
            },
            callback: {
                onClick: function (event, treeId, treeNode, treeFlag) {
                    $("#realpid").val(treeNode.moduleId);
                    $("#pid").val(treeNode.moduleName);
                    hideMenu();
                }
            }
        };
        var t = $("#moduleTree");
        t = $.fn.zTree.init(t, setting);
        treeObj = t;
    }

    function showMenu() {
        var cityObj = $("#pid");
        var cityOffset = $("#pid").offset();
        $("#menuContent").css({left: cityOffset.left + "px", top: cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");
        $("body").bind("mousedown", onBodyDown);
    }

    function hideMenu() {
        $("#menuContent").fadeOut("fast");
        $("body").unbind("mousedown", onBodyDown);
    }

    function onBodyDown(event) {
        if (!(event.target.id == "pid" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length > 0)) {
            hideMenu();
        }
    }
</script>
</body>
</html>